<template>
  <div class="page">
    <section class="page__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container page__search">
      <div class="page__search__type">
        <el-radio-group v-model="targetSelect" @change="targetChange">
          <el-radio-button v-for="item in targetOptions" :key="item.value" :label="item.value">
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
        <el-select v-model="typeSelect" placeholder="不限">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOpts"
        @change="deviceChange"
      />
      <BaseRadioGroupLabelItem
        v-model:select="userLabelSelect"
        label="用户类别"
        :no-margin-bottom="true"
        :options="userLabelOpts"
        @change="userLabelChange"
      />
    </section>
    <!-- 表格 -->
    <section class="base-page-container">
      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
      </KTable>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { useTableList } from './hooks/use-table-page';
defineOptions({
  name: 'KgjAnalysisPage'
});
const { state, tableState, tableEvent } = useTableList({ });
const deviceSelect = ref(0);
const deviceOpts: any[] = reactive([
  {
    label: '不限',
    value: 0
  },
  {
    label: 'PC',
    value: 1
  },
  {
    label: 'APP',
    value: 2
  },
  {
    label: '小程序',
    value: 3
  }
]);
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const userLabelSelect= ref(0);
const userLabelOpts: any[] = reactive([
  {
    label: '不限',
    value: 0
  },
  {
    label: '新访客',
    value: 1
  },
  {
    label: '老访客',
    value: 2
  }
]);

const userLabelChange = (val: string | number | boolean) => {
  console.log(val);
};
const typeSelect = ref(null);
const typeOptions:any[] = reactive([]);
const targetSelect = ref(1);
const targetOptions: any[] = reactive([
  { label: '单页面', value: 1 },
  { label: '页面组', value: 2 }
]);
const targetChange = () => {
  console.log(1);
};

const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
</script>
<style lang="scss" scoped>
.page {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__search {
    &__type {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .el-radio-group {
        margin-right: 24px;
      }
    }
  }
}
</style>
